<div class="schema-type-type">
    <span class="strong dropdown-label">{{ typeLabel }}:</span>
    <validation-problem *ngIf="hasValidationModel()" [model]="validationModel" [property]="validationProperty"></validation-problem>
    <drop-down [id]="'api-property-type'"
               [value]="type()"
               [options]="typeOptions()"
               (onValueChange)="changeType($event)"
               [noSelectionLabel]="'Choose Type'"></drop-down>
    <span class="dropdowns-label" *ngIf="isArray()">of</span>
    <drop-down *ngIf="isArray()"
               [id]="'api-property-type-of'"
               [value]="typeOf()"
               [options]="typeOfOptions()"
               (onValueChange)="changeTypeOf($event)"
               [noSelectionLabel]="'Choose Type'"></drop-down>
    <span class="dropdowns-label" *ngIf="shouldShowFormattedAs()">as</span>
    <drop-down *ngIf="shouldShowFormattedAs()"
               [id]="'api-property-type-as'"
               [value]="typeAs()"
               [options]="typeAsOptions()"
               (onValueChange)="changeTypeAs($event)"
               [noSelectionLabel]="'Format'"></drop-down>
</div>
<div class="schema-type-enum" *ngIf="shouldShowEnumEditor()">
    <span class="enum-label">Enum Values:</span>
    <inline-array-editor [value]="value.enum_" (onChange)="changeTypeEnum($event)"
                         noValueMessage="Click to define enum values."></inline-array-editor>
</div>
